.dx-size-default() {
    @GENERIC_TIMEVIEW_CLOCK_MIN_SIZE: 191px;
    @GENERIC_TIMEVIEW_FIELD_MIN_HEIGHT: 50px;
    @GENERIC_TIMEVIEW_ARROW_HEIGHT_REDUCE: 0px;
    @GENERIC_TIMEVIEW_FIELD_NUMBERBOX_REDUCE: 0px;
    @GENERIC_TIMEVIEW_CLOCK_ADDITIONAL_SIZE: 8px;
    @GENERIC_TIMEVIEW_TIME_SEPARATOR_MARGIN: 5px;
}
.dx-size-compact() {
    @GENERIC_TIMEVIEW_CLOCK_MIN_SIZE: 161px;
    @GENERIC_TIMEVIEW_FIELD_MIN_HEIGHT: 32px;
    @GENERIC_TIMEVIEW_ARROW_HEIGHT_REDUCE: 20px;
    @GENERIC_TIMEVIEW_FIELD_NUMBERBOX_REDUCE: 16px;
    @GENERIC_TIMEVIEW_CLOCK_ADDITIONAL_SIZE: 8px;
    @GENERIC_TIMEVIEW_TIME_SEPARATOR_MARGIN: 5px;
}


.dx-timeview {
    height: auto;
    width: auto;
}

.dx-timeview-clock {
    min-height: @GENERIC_TIMEVIEW_CLOCK_MIN_SIZE + @GENERIC_TIMEVIEW_CLOCK_ADDITIONAL_SIZE;
    min-width: @GENERIC_TIMEVIEW_CLOCK_MIN_SIZE + @GENERIC_TIMEVIEW_CLOCK_ADDITIONAL_SIZE;

    background: @timeview-clock-bg no-repeat 50% 50%;
    background-size: @GENERIC_TIMEVIEW_CLOCK_MIN_SIZE;
}

.dx-timeview-hourarrow {
    background-image: @timeview-hourarrow-bg;
    background-size: 5px 57px - @GENERIC_TIMEVIEW_ARROW_HEIGHT_REDUCE;
}

.dx-timeview-minutearrow {
    background-image: @timeview-minutearrow-bg;
    background-size: 5px 79px - @GENERIC_TIMEVIEW_ARROW_HEIGHT_REDUCE / 2;
}

.dx-timeview-time-separator {
    margin: 0 @GENERIC_TIMEVIEW_TIME_SEPARATOR_MARGIN;
}

.dx-timeview-field {
    min-height: @GENERIC_TIMEVIEW_FIELD_MIN_HEIGHT;
}

.dx-timeview-field .dx-numberbox {
    width: 70px - @GENERIC_TIMEVIEW_FIELD_NUMBERBOX_REDUCE;

    &.dx-numberbox-spin-touch-friendly {
        width: 110px - @GENERIC_TIMEVIEW_FIELD_NUMBERBOX_REDUCE;
    }
}
